<template>
  <el-container>
    <!-- nav导航栏 -->
    <el-aside width="auto">
      <span @click="isCollapse = !isCollapse">
        <!-- 图片1400*400 -->
        <img :src="logUrl" class="aaa" :class="{ 'toggle-btn': isCollapse }" />
      </span>
      <el-menu
        @select="tabAdd"
        :router="true"
        :unique-opened="true"
        :collapse="isCollapse"
        :default-openeds="operArray"
      >
        <!-- 后台获取 -->
        <template v-for="(item, index) in leftNavArrayList">
          <el-submenu
            v-if="item.resourceList.length != 0"
            :key="index"
            :index="item.code"
          >
            <template slot="title">
              <i class="iconfont" v-html="item.iconfont"></i>
              <span slot="title">{{ item.name }}</span>
            </template>

            <el-menu-item-group>
              <template v-for="(twoItem, twoIndex) in item.resourceList">
                <el-submenu
                  class="el-menu2"
                  v-if="twoItem.resourceList.length != 0"
                  :key="twoIndex"
                  :index="twoItem.code"
                >
                  <template slot="title">{{ twoItem.name }}</template>
                  <el-menu-item
                    v-for="(threeItem, threeIndex) in twoItem.resourceList"
                    :key="threeIndex"
                    :index="threeItem.url"
                    >{{ threeItem.name }}</el-menu-item
                  >
                </el-submenu>

                <el-menu-item v-else :key="twoIndex" :index="twoItem.url">{{
                  twoItem.name
                }}</el-menu-item>
              </template>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item v-else :index="item.url" :key="index">
            <i class="iconfont" v-html="item.iconfont"></i>
            <span slot="title">{{ item.name }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>

    <el-container>
      <!-- 头部 -->
      <el-header>
        <el-menu mode="horizontal" @select="handleSelect">
          <el-menu-item
            v-for="(item, index) in topNavArrayList"
            :key="index"
            :index="String(index)"
            >{{ item.name }}</el-menu-item
          >
        </el-menu>

        <!-- 头像操作区域 -->
        <div class="head-portrait">
          <el-tooltip placement="bottom">
            <div slot="content">
              <div>公司：中建云康</div>
              <div>工号：it9527</div>
              <div>用户：9527</div>
              <div>部门：it部</div>
              <div>职位：打杂</div>
            </div>
            <span>z9527 it部</span>
          </el-tooltip>

          <el-dropdown>
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>未读消息</el-dropdown-item>
              <el-dropdown-item>个人信息</el-dropdown-item>
              <el-dropdown-item>退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>

      <el-main>
        <!-- 路由显示区域 -->
        <transition name="list" mode="out-in">
          <router-view />
        </transition>
      </el-main>

      <!-- 页脚 -->
      <el-footer>copyright © 2020 ZJYK all rights reserved.</el-footer>
    </el-container>
  </el-container>
</template>

<script>
import monishuju from "./monishuju";
export default {
  created() {
    console.log(monishuju);

    this.topNavArrayList = monishuju.resources;
    this.logUrl = monishuju.companyLogo;
  },
  data() {
    return {
      topNavArrayList: [],
      leftNavArrayList: [],
      isCollapse: false,
      operArray: [],
      editableTabsValue: "/index",
      logUrl: null,
      editableTabs: [
        {
          name: "首页",
          path: "/index",
        },
      ],
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.leftNavArrayList = this.topNavArrayList[key].resourceList;
    },
    tabAdd() {},
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.aaa {
  width: 200px;
  height: 50px;
  display: inline-block;
  transition: all 0.5s cubic-bezier(0.53, 0.21, 0.8, 0.7);
}
.toggle-btn {
  width: 64px;
}
</style>